<template>
  <el-row class="tac">
    <el-col :span="!isCollapse? 3 : 1" class="ment">
      <submenu :is-collapse="isCollapse" />
    </el-col>
    <el-col :span="!isCollapse? 21 : 23">
      <el-row class="l-row">
        <el-col :span="1" style="text-align: center">
          <i v-show="!isCollapse" class="el-icon-s-fold l-ico" @click="isCollapse = true" />
          <i v-show="isCollapse" class="el-icon-s-unfold l-ico" @click="isCollapse = false" />
        </el-col>
        <el-col :span="3" :offset="20">
          <el-dropdown dropdown style="width: 100px">
            <el-row class="el-dropdown-link">
              <el-col :span="8">
                <el-avatar style="margin-top: 12px" :size="25" :src="avatar" /></el-col>
              <el-col :span="16" class="textHiddn">{{ user.name }} <i class="el-icon-arrow-down" /></el-col>
            </el-row>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="upPersonal">个人中心</el-dropdown-item>
              <el-dropdown-item @click.native="unLoging">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
      </el-row>
      <!--   标签页  -->
      <div class="tag">
        <tagsView />
      </div>
      <el-row class="l-view">
        <router-view />
      </el-row>
    </el-col>
  </el-row>
</template>

<script>
import db from '@/utils/localstorage'
import submenu from './submenu'
import tagsView from '@/Layout/TagsView/index.vue'
export default {
  components: { submenu, tagsView },
  data() {
    return {
      user: db.get('USER'),
      isCollapse: false
    }
  },
  computed: {
    avatar() {
      return this.$baseURL + '/' + this.user.avatar
    }
  },
  mounted() {
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath)
    },
    getRout(path) {
      this.$router.push(path)
    },
    unLoging() {
      db.clear()
      window.location.reload()
    },
    upPersonal() {
      this.$router.push('/regard')
    }
  }
}
</script>

<style scoped>
    .tac {
        height: 100vh;
    }
    .ment {
        height: 100%; background-color: #2c3e50;
        transition: all 0.2s;
    }
    .el-menu-vertical-demo:not(.el-menu--collapse) {
        width: 200px;
        min-height: 400px;
    }
    .l-row {
        width: 100%;
        height: 57px;
        text-align: right;
      overflow: hidden;
    }
    .l-h5 {
        color: white;
        text-align: center;
        font-size: 20px;
        margin: 10px auto
    }
    .l-view {
        background-color: #F3F5F8;
        height: calc(100vh - 57px);
    }
    .l-ico {
        line-height: 57px;
        font-size: 24px;
        cursor: pointer;
    }
    /*/deep/ .el-submenu__title {*/
    /*    padding: 0 10px;*/
    /*}*/
    /*/deep/ .el-menu-item {*/
    /*    padding: 0 10px;*/
    /*}*/
    .el-dropdown-link {
        cursor: pointer;
        line-height: 50px;
        padding: 0 10px;
    }
    .el-dropdown-link:hover{
      background-color: #f4f5f5;
    }
    /deep/ .el-menu--collapse {
      width: 100%;
    }
  .tag {
    box-shadow: 10px 12px 0px 0 rgba(0, 0, 0, 0.1);
    border-top: 1px solid #f1f1f1
  }
</style>
